<!--学生主页-->
<template>
    <div class="outer-container">
        <!--        导航栏部分-->
        <div class="nav-container">
            <nav class="navbar" style="height: 100%;">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <router-link to="/" class="text-decoration-none">
                            <h2 class="text-decoration-none" style="display: inline-block; margin-right: 10px;">
                                考试通
                            </h2>
                            <h6 style="display: inline-block; color: rgba(248,0,0,0.53); font-weight: bold;">学生端</h6>
                        </router-link>
                    </div>
                    <form class="form-inline" role="search"
                          method="get" target="_self">
                        <div class="input-group"><input name="KeyWord" class="form-control" type="text"
                                                        style="height: 30px; font-size: 13px; vertical-align: middle; width: 150px;"
                                                        placeholder="请输入要搜索的内容">
                            <div class="input-group-append">
                                <el-button type="primary" icon="el-icon-search"
                                           style="height: 30px; width: 70px;padding: 0;">搜索
                                </el-button>
                            </div>
                        </div>
                    </form>

                    <div class="user-info-part">
                        <el-avatar :src="circleUrl" size="medium" style="vertical-align: middle"></el-avatar>
                        <el-col :span="30">
                            <el-dropdown>
                                  <span class="paper-title"
                                        style="vertical-align: middle; display: inline-block; margin-top: 10px;">
                                    {{$store.getters.getStudentTrueName}}<i class="el-icon-arrow-down el-icon--right"></i>
                                  </span>
                                <el-dropdown-menu slot="dropdown" style="width: 150px;">
                                    <router-link to="/student/index/exam" class="text-decoration-none">
                                        <el-dropdown-item icon="el-icon-tickets" class="text-decoration-none">考试
                                        </el-dropdown-item>
                                    </router-link>
                                    <router-link to="/student/index/info" class="text-decoration-none">
                                        <el-dropdown-item icon="el-icon-setting" class="text-decoration-none">个人信息
                                        </el-dropdown-item>
                                    </router-link>
                                    <el-dropdown-item icon="el-icon-message">
                                        <button class="feedback-btn" @click="dialogFormVisible=true"
                                                style="border: none; outline: none; background-color: transparent; color: #606266;">
                                            提交反馈
                                        </button>
                                    </el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-remove-outline" @click="logout">
                                        <button class="feedback-btn" @click="logout"
                                                style="border: none; outline: none; background-color: transparent; color: #606266;">
                                            退出登录
                                        </button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-col>
                    </div>
                </div>
            </nav>
        </div>

        <el-dialog title="提交反馈" :visible.sync="dialogFormVisible">
            <el-form :model="feedbackForm">
                <el-form-item label="您的建议" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            autosize
                            placeholder="请输入内容"
                            v-model="feedbackForm.content"
                            autocomplete="off">
                    </el-input>
                </el-form-item>
                <el-form-item label="评价分数" :label-width="formLabelWidth">
                    <el-rate style="margin-top: 10px;"
                             v-model="feedbackForm.score"
                             show-text>
                    </el-rate>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="feedbackCancel">取 消</el-button>
                <el-button type="primary" @click="feedbackSubmit">提 交</el-button>
            </div>
        </el-dialog>


        <div class="body-container" style="height: auto;" :v-show="isLogin">
            <div class="container-fluid text-center" style="height: auto;">
                <div class="row content" style="padding: 0;">
                    <div class="col-sm-2 sidenav" style="font-size: 0.9em; padding: 0;">

                        <el-menu class="el-menu-vertical" background-color="#F9F9FA">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-document"></i>
                                    <span slot="title">考试</span>
                                </template>
                                <el-menu-item-group title="进行中">

                                    <el-badge :value="examingLen" class="item">
                                        <router-link to="/student/index/exam/now" class="text-decoration-none">
                                            <el-menu-item index="1-1">正在考试</el-menu-item>
                                        </router-link>
                                    </el-badge>
                                </el-menu-item-group>
                                <el-menu-item-group title="未进行">
                                    <router-link to="/student/index/exam/future" class="text-decoration-none">
                                        <el-menu-item index="1-2">近期考试</el-menu-item>
                                    </router-link>
                                    <router-link to="/student/index/exam/history" class="text-decoration-none">
                                        <el-menu-item index="1-3">考试记录</el-menu-item>
                                    </router-link>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title">我的错题</span>
                            </el-menu-item>
                            <el-menu-item index="3">
                                <i class="el-icon-data-analysis"></i>
                                <span slot="title">考试分析</span>
                            </el-menu-item>
                            <router-link to="/student/index/info" class="text-decoration-none">
                                <el-menu-item index="4">
                                    <i class="el-icon-setting"></i>
                                    <span slot="title">信息设置</span>
                                </el-menu-item>
                            </router-link>
                        </el-menu>
                    </div>
                    <div class="col-sm-8 text-left" style="height: auto;">
                        <router-view></router-view>
                    </div>

                    <div class="col-sm-2 sidenav" style="padding: 0; background-color: #f9f9fa;">
                        <div style="margin-top: 15px;">
                            <span class="title">消息列表</span>
                        </div>

                        <div class="well">
                            <p style="font-weight: bold">考试通知</p>
                            <el-card class="box-card">
                                <div class="text text-left">
                                    亲爱的同学，您有{{examingLen}}门考试正在进行
                                </div>
                            </el-card>
                        </div>

                        <div class="well">
                            <p style="font-weight: bold;">公告栏</p>
                            <div class="text-left">
                                <el-card class="box-card">
                                    <div class="text">
                                        该项目正处于开发中
                                    </div>
                                    <div class="text">
                                        禁止爬虫进行访问
                                    </div>
                                    <div class="text">
                                        禁止网站进行商业交易
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <footer class="container-fluid text-center" style="margin-top: 120px;">
            <!--以下是版权部分-->
            <div class="footer">
                <div class="footer-content">
                    <div class="col-md-3 ">
                        <span>地址</span>
                        <p>江西省南昌市青山湖区南京东路软件学院（北区）</p>
                    </div>
                    <div class="col-md-3">
                        <span>电话</span>
                        <p>咨询: +139 7948 2986 <br> 办公室: +207 235 7890</p>
                    </div>
                    <div class="col-md-3">
                        <span>邮件</span>
                        <p>办公室: 1160490625@qq.com</p>
                    </div>
                    <div class="col-md-3">
                        <span>社区</span>
                        <span class="iconfont icon-weibo" style="font-size: 16px;display: inline-block"></span>
                        <span class="iconfont icon-weixin" style="font-size: 16px;display: inline-block"></span>
                        <span class="iconfont icon-twitter" style="font-size: 16px;display: inline-block"></span>
                        <span class="iconfont icon-QQ" style="font-size: 18px;display: inline-block"></span>
                    </div>

                    <div class="right col-md-6">
                        Copyright © 2022 TTFE团队  版权所有
                    </div>

                    <div class="col-md-4 col-md-offset-2 word">
                        <p>开发团队</p>
                        <p>法律事务</p>
                        <p>私有权力</p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>

<script>
    import {request} from "../api/request";

    export default {
        name: "TeacherMain",
        created() {
            let that = this;
            request({
                method: 'post',
                headers: {
                    'Authorization': window.localStorage.getItem("token")
                },
                url: '/student/check_login'
            }).then(function (data) {
                data = data.data;
                if (data.code === 200) {
                    that.isLogin = true;
                    that.studentInfo = that.$store.getters.getStudentInfo;
                } else {
                    that.$message.error("登录超时，请重新登录");
                    that.$router.push('/user/login');
                }
            }).catch(function (err) {
                that.$message.error("登录超时，请重新登录");
                that.$router.push('/user/login');
            });
        },
        mounted() {
            let that = this;
            request({
                method: 'post',
                url: '/student/exam/now/' + this.$store.getters.getStudentId
            }).then(function (data) {
                that.examingLen = data.data.data.length;
            }).catch(function (err) {

            })
        },
        data() {
            return {
                isLogin: false,
                circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                examingLen: null,
                studentInfo: {},
                formLabelWidth: '120px',
                dialogFormVisible: false,
                feedbackForm: {
                    content: '',
                    score: null
                },
            }
        },
        methods: {
            feedbackCancel() {
                this.feedbackForm.content = '';
                this.feedbackForm.score = null;
                this.dialogFormVisible = false;
            },
            feedbackSubmit() {
                this.$notify({
                    title: '成功',
                    message: '感谢您的评价',
                    type: 'success',
                });
                this.dialogFormVisible = false;
            },
            logout() {
                window.localStorage.removeItem('vuex');
                window.localStorage.removeItem('token');
                window.location.reload();
            }
        }
    }
</script>

<style scoped>
    .outer-container {
        width: 100%;
        height: 100%;
    }

    .navbar {
        margin-bottom: 0;
        border-radius: 0;
    }

    .row.content {
        height: auto;
    }

    .sidenav {
        background-color: white;
        height: 100%;
    }

    .sidenav p {
        display: block;
        margin-bottom: 10px;
    }

    footer {
        background-color: #555;
        color: white;
        padding: 15px;
    }


    .nav-container {
        width: 100%;
        height: 70px;
        margin-bottom: 2px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-menu-vertical:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .item {
        margin-top: 10px;
        margin-right: 40px;
    }

    .paper-title {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        display: inline-block;
        font-size: 1.05em;
        font-weight: 700;
        margin-right: 15px;
        cursor: pointer;
        color: #303133;
    }

    .title {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        display: inline-block;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #303133;
    }

    .feedback-btn:hover {
        color: #66b1ff;
    }

    .text {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    /*以下是foot版权部份*/
    .footer {
        width: 100%;
        height: 280px;
    }

    .footer-content {
        margin: 0 auto;
        width: 76%;
    }

    .footer-content > div {
        margin-top: 20px;
        height: 140px;
    }

    .footer-content div span {
        display: block;
        font-size: 20px;
        margin-top: 20px;
        margin-left: 20px;
        letter-spacing: 2px;
    }

    .footer-content div p {
        display: inline-block;
        margin-top: 15px;
        margin-left: 20px;
        letter-spacing: 2px;
        color: #8D97AD;
    }

    .footer-content div {
        overflow: hidden;
    }

    .footer-content div .icon-weibo {
        display: inline-block;
        margin-top: 16px;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        background-color: #F4F8FA;
        color: #29353A;
        transition: .3s;
        margin-right: -10px;
    }

    .footer-content div .icon-weixin {
        display: inline-block;
        margin-top: 16px;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        background-color: #F4F8FA;
        color: #29353A;
        transition: .3s;
        margin-right: -10px;
    }

    .footer-content div .icon-twitter {
        display: inline-block;
        margin-top: 16px;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        background-color: #F4F8FA;
        color: #29353A;
        transition: .3s;
        margin-right: -10px;
    }

    .iconfont:hover {
        cursor: pointer;
    }

    .footer-content div .icon-QQ {
        display: inline-block;
        margin-top: 16px;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        background-color: #F4F8FA;
        color: #29353A;
        transition: .3s;
        margin-right: -10px;
    }

    .footer-content div .icon-weibo:hover {
        background-color: #188EF4;
        color: #FFFFFF;
    }

    .footer-content div .icon-weixin:hover {
        background-color: #188EF4;
        color: #FFFFFF;
        margin-top: 16px;
    }

    .footer-content div .icon-twitter:hover {
        background-color: #188EF4;
        color: #FFFFFF;
        margin-top: 16px;
    }

    .footer-content div .icon-QQ:hover {
        background-color: #188EF4;
        color: #FFFFFF;
        margin-top: 16px;
    }

    .footer-content .right {
        color: #8D97AD;
        height: 50px;
        font-weight: 200;
        font-size: 14px;
        line-height: 50px;
        margin-top: 50px;
        letter-spacing: 1px;
    }

    .footer-content .word {
        height: 50px;
        margin-top: 50px;
        color: #8D97AD;
        font-size: 14px;
    }
</style>